<html>
    <head>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' ></script>
        <style>
            svg{
                border:1px solid rgb(230,230,230);
                box-shadow:0 0 5px rgba(100,100,100,.3);
                margin:30px auto;
            }
            svg .node{
                fill:#888;
                stroke:#000;
                stroke-width:1px;
            }
            svg .link{
                stroke:#000;
                stroke-width:1px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            (function(win){

                var svg = d3.select('body').append('svg').attr({
                    width : 500 ,
                    height : 500
                });

                var nodes = [] , links = [] ;
                var getRand = function(rang){
                    return parseInt(Math.random()*rang) ;
                } ;
                for( var i = 0 ; i < 10 ; i++){
                    nodes.push({
                        index : i ,
                        x : getRand(500) ,
                        y : getRand(500) ,
                        px : getRand(100) ,
                        py : getRand(100) ,
                        fixed :false ,
                        weight : 0
                    }) ;
                }
                for(var i = 0 ; i < 10 ; i ++){
                    var obj = { source : nodes[i] };
                    obj.target = nodes[0] ;
                    if(i!==9){ obj.target = nodes[i+1] }
                    links.push(obj) ;
                }
                var force = d3.layout.force().linkDistance(100).nodes(nodes).links(links).size([500,500]).start() ;

                var nodesEle = svg.selectAll('circle').data(nodes)
                        .enter().append('circle')
                            .attr({
                                'class': 'node',
                                'r':10,
                                'cx' : function(d){ return d.x ; } ,
                                'cy' : function(d){ return d.y ; }
                            }).call(force.drag);
                var linksEle = svg.selectAll('.link').data(links).enter()
                        .append('line').attr({
                            'class' : 'link'
                        }) ;
                force.on('tick',function(){
                    nodesEle.attr({
                        'cx' : function(d){ return d.x; } ,
                        'cy' : function(d){ return d.y; }
                    });
                    linksEle.attr({
                        'x1' : function(d){ return d.source.x ; } ,
                        'y1' : function(d){ return d.source.y } ,
                        'x2' : function(d){ return d.target.x } ,
                        'y2' : function(d){ return d.target.y }

                    }) ;
                }) ;


            }(window)) ;
        </script>
    </body>
</html>